<template>
	<view class="uni-numbox">
		<view :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" class="uni-numbox__minus" @click="_calcValue('-1')">-</view>
		<input disabled v-model="inputValue" class="uni-numbox__value" type="number" @blur="_onBlur" />
		<view :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" class="uni-numbox__plus" @click="_calcValue('1')">+</view>
	</view>
</template>
<script>
export default {
	name: 'UniNumberBox',
	props: {
		value: {
			type: [Number, String],
			default:0
		},
		min: {
			type: [Number, String],
			default: 0
		},
		max: {
			type: [Number, String],
			default: 100
		},
		step: {
			type: Number,
			default: 1
		},
		disabled: {
			type: Boolean,
			default: false
		},
		index: {
			type: Number,
			default: 0
		},
		parmentIndex: {
			type: Number,
			default: 0
		},
		parentId:{
			type:[Number,String],
			default:""
		},
		isadd: {
			type: Boolean,
			default: false
		}
	},
	watch:{
		value:{
			handler(newval){
				this.inputValue=newval;
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			inputValue: 0,
			timer: 0
		};
	},
	methods: {
		init(value){
			this.inputValue =value;
		},
		chageInput() {
			if (this.inputValue == this.value) return;
			let obj = {
				number: this.inputValue-0,
				index: this.index,
				step: this.step,
				parentId:this.parentId
			};
			this.$emit('change', obj);
		},
		async _calcValue(type) {
			if (this.disabled) {
				return;
			}
			await this.addCart(this.parentId, type, 'cart');
			this.chageInput();
		},
		_onBlur(event) {
			let value = event.detail.value;
			this.inputValue = value;
			this.chageInput();
		}
	}
};
</script>
<style>
@charset "UTF-8";

.uni-numbox {
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/* height: 30upx; */
	position: relative;
}

.uni-numbox:after {
	content: '';
	position: absolute;
	transform-origin: center;
	box-sizing: border-box;
	pointer-events: none;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	border: 1px solid #c8c7cc;
	border-radius: 12upx;
	transform: scale(0.5);
}

.uni-numbox__minus,
.uni-numbox__plus {
	background-color: #f8f8f8;
	width: 50upx;
	font-size: 40upx;
	height: 50upx;
	line-height: 50upx;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333;
	position: relative;
}

.uni-numbox__value {
	position: relative;
	background-color: #ffffff;
	width: 60upx;
	height: 50upx;
	line-height: 50upx;
	text-align: center;
	font-size: 26upx;
}

.uni-numbox__value:after {
	content: '';
	position: absolute;
	transform-origin: center;
	box-sizing: border-box;
	pointer-events: none;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	/* border-style: solid;
		border-color: #c8c7cc;
		border-left-width: 1px;
		border-right-width: 1px;
		border-top-width: 0;
		border-bottom-width: 0;
		transform: scale(.5) */
}

.uni-numbox--disabled {
	color: silver;
}
</style>
